<template>
  <div class="full">
    <div id="mountNode" class="full bgc_fff" ref="box"></div>
  </div>
</template>

<script>
  import G6 from '@antv/g6';

  export default {
    props: {
      chartData: {}
    },
    data() {
      return {
        graph: null,
        
      }
    },
    watch: {
      chartData: {
        handler(val) {
          debugger
          this.initChartData(val)
        },
        immediate: true,
        deep: true
      }
    },
    mounted() {
      
    },
    methods: {
      initChartData() {
        let box = this.$refs.box

        const graph = new G6.Graph({
          container: 'mountNode', 

          width: box.style.width, 
          height: box.style.height, 
          fitView: true,
          fitViewPadding: 40,
          defaultNode: {
            type: 'image',
            size: [60, 40],
            anchorPoints: [
              [0, 0.5],
              [1, 0.5],
            ],
            labelCfg: {
              position: 'bottom',
              // color: '#fff'        // image 节点 不支持 color
            },
            style: {
              fill: '#ff0',
              stroke: '#888'
            }
            // 其他配置
          },
          // 定义布局
          layout: {
            // random force circular radial mds fruchterman dagre concentric grid dendrogram compactBox mindmap indented 
            type: 'dagre',
            rankdir: 'LR',
            align: '',
            nodesep: 15,
            ranksep: 40
          },
          modes: {
            default: [
              'drag-canvas', 
              'zoom-canvas', 
              'drag-node',
              {
                // 定义展开/收缩行为
                type: 'collapse-expand',
              },
              {
                type: 'tooltip',
                formatText(model) {
                  let text = '名称: ' + model.label + '<br/> class: ' + model.class;
                  return text
                }
              },
              {
                type: 'edge-tooltip', // 边提示框
                formatText(model) {
                  // 边提示框文本内容
                  const text =
                    'source: ' +
                    model.source +
                    '<br/> target: ' +
                    model.target +
                    '<br/> weight: ' +
                    model.weight;
                  return text;
                },
              },
            ]
          },
          nodeStateStyles: {
            hover: {
              fill: 'lightsteelblue',
            },
            click: {
              stroke: '#f00',
              lineWidth: 2
            }
          },
          edgeStateStyles: {
            click: {
              stroke: 'steelblue'
            }
          }
        });

        graph.on('node:mouseenter', (e) => {
          let nodeItem = e.item; // 获取鼠标进入的节点元素对象
          graph.setItemState(nodeItem, 'hover', true); // 设置当前节点的 hover 状态为 true
        });

        // 鼠标离开节点
        graph.on('node:mouseleave', (e) => {
          let nodeItem = e.item; // 获取鼠标离开的节点元素对象
          graph.setItemState(nodeItem, 'hover', false); // 设置当前节点的 hover 状态为 false
        });

        graph.on('node:click', e => {
          let clickNodes = graph.findAllByState('node', 'click');
          clickNodes.forEach((cn) => {
            graph.setItemState(cn, 'click', false);
          });
          let nodeItem = e.item; // 获取被点击的节点元素对象
          graph.setItemState(nodeItem, 'click', true); // 设置当前节点的 click 状态为 true
        })

        // 点击边
        graph.on('edge:click', (e) => {
          // 先将所有当前是 click 状态的边置为非 click 状态
          let clickEdges = graph.findAllByState('edge', 'click');
          clickEdges.forEach((ce) => {
            graph.setItemState(ce, 'click', false);
          });
          let edgeItem = e.item; // 获取被点击的边元素对象
          graph.setItemState(edgeItem, 'click', true); // 设置当前边的 click 状态为 true
        });

        graph.data(val); // 读取节点数据
        graph.render();   // 渲染图
      }
    }
  }
</script>

<style>
  /* 提示框的样式 */
  .g6-tooltip {
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    font-size: 12px;
    color: #545454;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px 8px;
    box-shadow: rgb(174, 174, 174) 0px 0px 10px;
  }
</style>